<template>
  <div class="container">
    <h2>
      注：由于各大浏览器厂商对浏览器插件的规范化，流程编辑器需手动配置一次flash插件环境（部分浏览器配置方式示例如下）
    </h2>
    <br />
    <div v-for="data in dataList" :key="data.id">
      <h2 v-if="data.headTitle">{{ data.headTitle }}</h2>
      <p class="title">{{ data.title }}</p>
      <a :href="data.hrefDress" v-if="data.hrefDress">{{ data.hrefDress }}</a>
      <p v-show="data.textContent">{{ data.textContent }}</p>
      <h3 v-show="data.textH3">{{ data.textH3 }}</h3>
      <p v-show="data.textFoot">{{ data.textFoot }}</p>
      <br />
      <img :src="data.img" />
      <img :src="data.img1" v-if="data.img1" /><br />
      <p class="title" v-if="data.hint">{{ data.hint }}</p>
      <br />
      <img :src="data.img2" v-if="data.img2" /><br />
      <img :src="data.img3" v-if="data.img3" /><br />
      <p class="title" v-if="data.hint1">
        {{ data.hint1 }}<br />{{ data.hint2 }}
      </p>
      <br />
      <img :src="data.img4" v-if="data.img4" /><br />
      <img :src="data.img5" v-if="data.img5" /><br />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          id: 1,
          title: "1.Edge浏览器开启方式：（Microsoft Edge 42.17134.1098.0）",
          img: require("@/config/assets/images/1.jpg"),
          img1: require("@/config/assets/images/2.png"),
          img2: require("@/config/assets/images/3.png")
        },
        {
          id: 2,
          title: "2.Safari浏览器开启方式：",
          img: require("@/config/assets/images/4.png"),
          img1: require("@/config/assets/images/5.png")
        },
        {
          id: 3,
          title: "3.火狐浏览器最新版本：默认开启也可设置",
          img: require("@/config/assets/images/6.png"),
          img1: require("@/config/assets/images/7.png"),
          img2: require("@/config/assets/images/8.png")
        },
        {
          id: 4,
          title: "4.谷歌浏览器：（老版本火狐类似）",
          img: require("@/config/assets/images/9.png"),
          img1: require("@/config/assets/images/10.png"),
          hint: "如果点击没有Flash控制弹出框选项需点击网站设置中选择Flash：",
          img2: require("@/config/assets/images/11.png"),
          img3: require("@/config/assets/images/12.png"),
          hint1:
            "如果配置后还无反应请下载：http://get.adobe.com/cn/flashplayer/后配置",
          hint2: "使用或如下图弹窗点击取消后下载插件",
          img4: require("@/config/assets/images/13.png"),
          img5: require("@/config/assets/images/14.png")
        },
        {
          id: 5,
          headTitle: "谷歌浏览器Adobe Flash Player不是最新版本问题解决步骤",
          title: "1.打开浏览器，复制地址:",
          hrefDress:
            "http://www.adobe.com/support/flashplayer/debug_downloads.html",
          textContent: "粘贴到地址栏中，按Enter键前往，步骤截图如下所示",
          textH3: "英文版",
          img1: require("@/config/assets/images/2_1.png"),
          textFoot: "注意系统环境，根据自身PC机系统环境选择不同的下载文件"
        },
        {
          id: 6,
          textH3: "中文版",
          img1: require("@/config/assets/images/2_2.png"),
          textFoot: "点击红色方框里面的附件链接,下载附件"
        },
        {
          id: 7,
          title: "2.安装",
          img1: require("@/config/assets/images/2_3.png")
        },
        {
          id: 8,
          textH3: "英文版",
          img1: require("@/config/assets/images/2_4.png")
        },
        {
          id: 9,
          textH3: "中文版",
          img1: require("@/config/assets/images/2_5.png"),
          textFoot: "3.重启浏览器"
        }
      ]
    };
  },
  mounted() {
    let topNavNode = document.querySelector(".ccui-top-bar-wrapper ");
    document.body.removeChild(topNavNode);
  }
};
</script>

<style scoped lang="scss">
.container {
  h2 {
    text-align: center;
  }

  h3,
  a,
  p,
  .title {
    padding: 8px 0 8px 338px;
  }

  .title {
    color: red;
    /*text-align: center;*/
  }

  img {
    display: block;
    width: 1000px;
    /*height: 630px;*/
    margin: 0 auto;
  }

  a {
    display: block;
    /*text-align: center;*/
    color: blue;
    margin: 0 auto;
  }

  p {
    /*text-align: center;*/
  }
}
</style>
